<template>
  <div class="divulgeSalary-container">
    <div class="divulgeSalary-search">
      <span class="page-title">晒工资列表</span>
      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="用户昵称" value="1"></el-option>
          <el-option label="企业名称" value="2"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain>重置</el-button>
    </div>

    <!--岗位类型table-->
    <div class="divulgeSalary-table">
      <el-table ref="multipleTable" :data="tableData" border stripe fit v-loading="listLoading"
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}">
        <el-table-column prop="id" label="id" width="80">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" width="160">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="企业名称" width="320">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="工作环境分" width="100">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="工资单图片" width="100">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="岗位名称" width="100">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="薪资月份" width="80">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="预期工资" width="100">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="实际工资" width="100">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="是否处理" width="80">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="是否隐藏" width="80">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="生成时间" width="160">
          <template slot-scope="scope">
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="200">
          <template slot-scope="{row}">
            <el-dropdown size="medium" :split-button="true" type="primary" @click="handleLook(row)">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)">编辑</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="divulgeSalary-dialog look-dialog">
      <el-form ref="form" label-width="140px" size="mini">
        <el-form-item label="用户昵称：">
          <span>20054602002213</span>
        </el-form-item>
        <el-form-item label="企业名称：">
          <span>张三</span>
        </el-form-item>
        <el-form-item label="工资单图片：">
          <span>杭州市区</span>
        </el-form-item>
        <el-form-item label="岗位名称：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="薪资月份：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="预期工资：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="实际工资：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="是否隐藏：">
          <span>否</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 96px">编辑</el-button>
        <el-button style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--新增/编辑-->
    <el-dialog title="编辑" :lock-scroll="true" :visible.sync="dialogEditVisible" width="960px"
               class="divulgeSalary-dialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" size="mini">
        <el-form-item label="用户昵称：">
          <span>20054602002213</span>
        </el-form-item>
        <el-form-item label="企业名称：">
          <span>张三</span>
        </el-form-item>
        <el-form-item label="工资单图片：">
          <span>杭州市区</span>
        </el-form-item>
        <el-form-item label="岗位名称：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="薪资月份：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="预期工资：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="实际工资：">
          <span>8.0</span>
        </el-form-item>
        <el-form-item label="是否隐藏：" prop="isHide">
          <el-radio-group v-model="ruleForm.isHide">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" style="width: 96px">保存</el-button>
        <el-button style="width: 96px" @click="dialogEditVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: "divulgeSalary",
    data() {
      return {
        keyWords: '',
        select: '1',
        listLoading: false,
        dialogLookVisible: false,
        dialogEditVisible: false,
        tableData: [],
        ruleForm: {},
        rules: {}
      }
    }
    ,
    methods: {
      handleLook(row) {//详细信息
        this.dialogLookVisible = true;
        console.log(row);
      },
      handleEdit(row) {//编辑
        this.dialogEditVisible = true;
        console.log(row);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .divulgeSalary-container {
    .divulgeSalary-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 18px;
        text-align: left;
        min-width: 160px;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .excel-inout-box {
        margin-left: auto;
        margin-right: 18px;
      }
    }

    .divulgeSalary-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header .has-gutter th {
        padding: 3px 0px;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .divulgeSalary-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .look-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
    .divulgeSalary-dialog {
      font-size: 14px;
      color: #606266;
    }
    > > > .el-button {
      line-height: 1.2;
    }
  }
</style>
